<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="80%" max-height="60vh" scroll>
    <el-tabs v-model="activeTab" type="border-card">
      <el-tab-pane label="基本信息" name="1">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">藏品总登记号：</span>
              <span class="info-value">{{ formData.generalAccessionNumber || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">编号类型：</span>
              <span class="info-value">{{
                getDictLabel(DICT_TYPE.COLLECTION_NUM_TYPE, formData.numberType) || '-'
              }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">编号：</span>
              <span class="info-value">{{ formData.number || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">名称：</span>
              <span class="info-value">{{ formData.name || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">原名：</span>
              <span class="info-value">{{ formData.originalName || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">年代：</span>
              <span class="info-value">{{ calcFlatEraName() || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">具体年代：</span>
              <span class="info-value">{{ formData.specificEra || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">文物类别：</span>
              <span class="info-value">{{
                getDictLabel(DICT_TYPE.COLLECTION_CATEGORY, formData.category) || '-'
              }}</span>
            </div>
          </el-col>
          <!-- <el-col :span="12">
            <div class="info-item">
              <span class="info-label">质地类别1：</span>
              <span class="info-value">{{
                flatCataNameCalc(formData.materialCategory1) || '-'
              }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">质地类别2：</span>
              <span class="info-value">{{
                flatCataNameCalc(formData.materialCategory2) || '-'
              }}</span>
            </div>
          </el-col> -->
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">质地类别：</span>
              <span class="info-value">{{ calcFlatCataName() || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">件数：</span>
              <span class="info-value">{{ formData.numberOfCases || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">单位：</span>
              <span class="info-value">{{
                getDictLabel(DICT_TYPE.COLLECTION_NUM_UNIT, formData.numberUnit) || '-'
              }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">实际数量：</span>
              <span class="info-value">{{ formData.actualQuantity || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">通长：</span>
              <span class="info-value">{{ formData.sizeLength || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">通宽：</span>
              <span class="info-value">{{ formData.sizeWidth || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">通高：</span>
              <span class="info-value">{{ formData.sizeHeight || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">具体尺寸：</span>
              <span class="info-value">{{ formData.specificSize || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">质量范围：</span>
              <span class="info-value">{{ formData.weightRange || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">具体质量：</span>
              <span class="info-value">{{ formData.specificWeight || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">单位：</span>
              <span class="info-value">{{
                getDictLabel(DICT_TYPE.COLLECTION_QUALITY_UNIT, formData.weightUnit) || '-'
              }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">文物级别：</span>
              <span class="info-value">{{
                getDictLabel(DICT_TYPE.COLLECTION_GRADE, formData.relicLevel) || '-'
              }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">文物来源：</span>
              <span class="info-value">{{
                getDictLabel(DICT_TYPE.COLLECTION_SOURCE, formData.relicSource) || '-'
              }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">完残程度：</span>
              <span class="info-value">{{
                getDictLabel(DICT_TYPE.COLLECTION_CONDITION_STATUS, formData.completenessDegree) ||
                '-'
              }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">完残状况：</span>
              <span class="info-value">{{ formData.completenessCondition || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">保存状态：</span>
              <span class="info-value">{{
                getDictLabel(
                  DICT_TYPE.COLLECTION_PRESERVATION_STATUS,
                  formData.preservationState
                ) || '-'
              }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">入藏时间范围：</span>
              <span class="info-value">{{ formData.collectionTimeRange || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">入藏年度：</span>
              <span class="info-value">{{ formData.collectionYear || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">藏品登记号：</span>
              <span class="info-value">{{ formData.collectionRegistrationNumber || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">版本：</span>
              <span class="info-value">{{ formData.version || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">存卷：</span>
              <span class="info-value">{{ formData.storageVolume || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">行政区划：</span>
              <span class="info-value">{{ formData.administrativeDivision || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">单位编码：</span>
              <span class="info-value">{{ formData.unitCode || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">单位名称：</span>
              <span class="info-value">{{ formData.unitName || '-' }}</span>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="扩展信息" name="2">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">画心尺寸-长：</span>
              <span class="info-value">{{ formData.paintingLength || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">画心尺寸-宽：</span>
              <span class="info-value">{{ formData.paintingWidth || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">画心尺寸-高：</span>
              <span class="info-value">{{ formData.paintingHeight || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">装裱尺寸-长：</span>
              <span class="info-value">{{ formData.mountingLength || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">装裱尺寸-宽：</span>
              <span class="info-value">{{ formData.mountingWidth || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">装裱尺寸-高：</span>
              <span class="info-value">{{ formData.mountingHeight || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="info-item">
              <span class="info-label">内容题材：</span>
              <span class="info-value">{{ formData.subjectMatter || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="info-item">
              <span class="info-label">技法风格：</span>
              <span class="info-value">{{ formData.techniqueStyle || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="info-item">
              <span class="info-label">款识信息：</span>
              <span class="info-value">{{ formData.inscriptionInfo || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">形状：</span>
              <span class="info-value">{{ formData.shape || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">钮式：</span>
              <span class="info-value">{{ formData.knobStyle || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">文字类型：</span>
              <span class="info-value">{{ formData.textType || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">边框特征：</span>
              <span class="info-value">{{ formData.borderFeature || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">印面尺寸：</span>
              <span class="info-value">{{ formData.sealSize || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="info-item">
              <span class="info-label">印文排列：</span>
              <span class="info-value">{{ formData.textArrangement || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="info-item">
              <span class="info-label">印文内容：</span>
              <span class="info-value">{{ formData.sealContent || '-' }}</span>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="藏品附件" name="3">
        <el-row :gutter="20">
          <!-- 藏品主图 -->
          <el-col :span="24" v-if="coverImage">
            <div class="media-section">
              <h4 class="media-title">藏品主图</h4>
              <div class="image-preview-container">
                <div class="image-item" @click="previewImage(coverImage)">
                  <img :src="coverImage" alt="藏品主图" class="preview-image" />
                  <div class="image-overlay">
                    <Icon icon="ep:zoom-in" class="preview-icon" />
                    <span>点击预览</span>
                  </div>
                </div>
              </div>
            </div>
          </el-col>

          <!-- 藏品图片 -->
          <el-col :span="24" v-if="collectionImages.length > 0">
            <div class="media-section">
              <h4 class="media-title">藏品图片 ({{ collectionImages.length }}张)</h4>
              <div class="image-grid">
                <div
                  v-for="(image, index) in collectionImages"
                  :key="index"
                  class="image-item"
                  @click="previewAllImages(coverImage ? index + 1 : index)"
                >
                  <img :src="image" :alt="`藏品图片${index + 1}`" class="preview-image" />
                  <div class="image-overlay">
                    <Icon icon="ep:zoom-in" class="preview-icon" />
                    <span>点击预览</span>
                  </div>
                </div>
              </div>
            </div>
          </el-col>

          <!-- 藏品音频 -->
          <el-col :span="24" v-if="collectionAudios.length > 0">
            <div class="media-section">
              <h4 class="media-title">藏品音频 ({{ collectionAudios.length }}个)</h4>
              <div class="file-list">
                <div v-for="audio in collectionAudios" :key="audio.id" class="file-item">
                  <Icon icon="ep:headphone" class="file-icon audio-icon" />
                  <span class="file-name">{{ audio.name }}</span>
                  <el-button
                    type="primary"
                    size="small"
                    @click="downloadFile(audio.url, audio.name)"
                  >
                    <Icon icon="ep:download" /> 下载
                  </el-button>
                </div>
              </div>
            </div>
          </el-col>

          <!-- 藏品视频 -->
          <el-col :span="24" v-if="collectionVideos.length > 0">
            <div class="media-section">
              <h4 class="media-title">藏品视频 ({{ collectionVideos.length }}个)</h4>
              <div class="file-list">
                <div v-for="video in collectionVideos" :key="video.id" class="file-item">
                  <Icon icon="ep:video-camera" class="file-icon video-icon" />
                  <span class="file-name">{{ video.name }}</span>
                  <el-button
                    type="primary"
                    size="small"
                    @click="downloadFile(video.url, video.name)"
                  >
                    <Icon icon="ep:download" /> 下载
                  </el-button>
                </div>
              </div>
            </div>
          </el-col>

          <!-- 链接地址 -->
          <el-col :span="24" v-if="collectionLinks.length > 0">
            <div class="media-section">
              <h4 class="media-title">相关链接 ({{ collectionLinks.length }}个)</h4>
              <div class="file-list">
                <div v-for="link in collectionLinks" :key="link.id" class="file-item">
                  <Icon icon="ep:link" class="file-icon link-icon" />
                  <span class="file-name link-text">{{ link.name }}</span>
                  <el-button type="success" size="small" @click="openLink(link.url)">
                    <Icon icon="ep:top-right" /> 打开链接
                  </el-button>
                </div>
              </div>
            </div>
          </el-col>

          <!-- 藏品三维文件 -->
          <el-col :span="24" v-if="collection3DFiles.length > 0">
            <div class="media-section">
              <h4 class="media-title">藏品三维文件 ({{ collection3DFiles.length }}个)</h4>
              <div class="file-list">
                <div v-for="file3d in collection3DFiles" :key="file3d.id" class="file-item">
                  <Icon icon="ep:box" class="file-icon model-icon" />
                  <span class="file-name">{{ file3d.name }}</span>
                  <div class="file-actions">
                    <el-button
                      type="info"
                      size="small"
                      @click="preview3DModel(file3d.url, file3d.name)"
                    >
                      <Icon icon="ep:view" /> 预览
                    </el-button>
                    <el-button
                      type="primary"
                      size="small"
                      @click="downloadFile(file3d.url, file3d.name)"
                    >
                      <Icon icon="ep:download" /> 下载
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </el-col>

          <!-- 藏品精准三维文件 -->
          <el-col :span="24" v-if="collection3DPreciseFiles.length > 0">
            <div class="media-section">
              <h4 class="media-title">精准三维文件 ({{ collection3DPreciseFiles.length }}个)</h4>
              <div class="file-list">
                <div
                  v-for="preciseFile in collection3DPreciseFiles"
                  :key="preciseFile.id"
                  class="file-item"
                >
                  <Icon icon="ep:cpu" class="file-icon precise-icon" />
                  <span class="file-name">{{ preciseFile.name }}</span>
                  <el-button
                    type="primary"
                    size="small"
                    @click="downloadFile(preciseFile.url, preciseFile.name)"
                  >
                    <Icon icon="ep:download" /> 下载
                  </el-button>
                </div>
              </div>
            </div>
          </el-col>

          <!-- 无附件提示 -->
          <el-col
            :span="24"
            v-if="
              !coverImage &&
              collectionImages.length === 0 &&
              collectionAudios.length === 0 &&
              collectionVideos.length === 0 &&
              collection3DFiles.length === 0 &&
              collectionLinks.length === 0 &&
              collection3DPreciseFiles.length === 0
            "
          >
            <div class="no-media">
              <Icon icon="ep:picture" class="no-media-icon" />
              <p>暂无多媒体附件</p>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane name="4" :disabled="!formData.id">
        <template #label>
          <el-tooltip
            effect="dark"
            content="请先保存基本信息"
            placement="top-start"
            :disabled="!!formData.id"
          >
            <span>二维采集信息</span>
          </el-tooltip>
        </template>
        <collectionimageacquisition type="view" :data="formData" />
      </el-tab-pane>
      <el-tab-pane name="5" :disabled="!formData.id">
        <template #label>
          <el-tooltip
            effect="dark"
            content="请先保存基本信息"
            placement="top-start"
            :disabled="!!formData.id"
          >
            <span>三维采集信息</span>
          </el-tooltip>
        </template>
        <collection3dacquisition type="view" :data="formData" />
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { CollectionManagementApi, CollectionManagementVO } from '@/api/dr/collectionmanagement'
import { getDictDataByParentId } from '@/api/system/dict/dict.data'
import { createImageViewer } from '@/components/ImageViewer'
import collectionimageacquisition from '../collectionimageacquisition/index.vue'
import collection3dacquisition from '../collection3dacquisition/index.vue'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('查看藏品信息') // 弹窗的标题
const activeTab = ref('1') // 活动的标签页
const formData = ref<any>({}) // 表单数据

// 多媒体文件数据
const mediaFiles = ref<any[]>([])
const coverImage = ref<string>('')
const collectionImages = ref<string[]>([])
const collectionAudios = ref<any[]>([])
const collectionVideos = ref<any[]>([])
const collection3DFiles = ref<any[]>([])
const collectionLinks = ref<any[]>([])
const collection3DPreciseFiles = ref<any[]>([])

/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('详情')
  // 获取数据
  try {
    getDictData()
    formData.value = await CollectionManagementApi.getCollectionManagement(id)
    // 加载多媒体文件数据
    loadMediaFiles(id)
  } catch (error) {
    message.error('获取藏品信息失败')
  }
}
const flatCataList = ref<any[]>([])
const flatEraList = ref<any[]>([])
const getDictData = () => {
  getDictDataByParentId({ parentId: 1 }).then((res) => {
    console.log('getDictDataByParentId res', res)
    flatCataList.value = res
  })
  getDictDataByParentId({ parentId: 1901 }).then((res) => {
    console.log('getDictDataByParentId res', res)
    flatEraList.value = res
  })
}
const flatCataNameCalc = (id: number | string | undefined) => {
  const item = flatCataList.value.find((item) => item.id + '' === id + '')
  return item?.label
}
// materialCategory1, materialCategory2, materialCategory3=material
const calcFlatCataName = () => {
  const values: string[] = []
  values.push(flatCataNameCalc(formData.value.materialCategory1))
  values.push(flatCataNameCalc(formData.value.materialCategory2))
  values.push(flatCataNameCalc(formData.value.material))
  return values.join('/')
}
const flatEraNameCalc = (id: number | string | undefined) => {
  const item = flatEraList.value.find((item) => item.id + '' === id + '')
  return item?.label
}
// chineseHistoricalEra,archaeologicalEra,geologicalEra,era
const calcFlatEraName = () => {
  const values: string[] = []
  values.push(flatEraNameCalc(formData.value.chineseHistoricalEra))
  values.push(flatEraNameCalc(formData.value.archaeologicalEra))
  values.push(flatEraNameCalc(formData.value.geologicalEra))
  values.push(flatEraNameCalc(formData.value.era))
  return values.join('/')
}
/** 获取字典标签 */
const getDictLabel = (type: string, value: string) => {
  const dict = getStrDictOptions(type).find((item) => item.value === value)
  return dict ? dict.label : '-'
}

// 加载多媒体文件数据
const loadMediaFiles = async (collectionId: number) => {
  try {
    const linkData = await CollectionManagementApi.getCollectionModelLinkAddress({
      collectionId,
      bizType: 1
    })
    console.log('linkData', linkData)
    mediaFiles.value = linkData || []

    // 重置数据
    coverImage.value = ''
    collectionImages.value = []
    collectionAudios.value = []
    collectionVideos.value = []
    collection3DFiles.value = []
    collectionLinks.value = []
    collection3DPreciseFiles.value = []

    // 分类处理数据
    mediaFiles.value.forEach((item: any) => {
      const typeNum = parseInt(item.type)
      switch (typeNum) {
        case 0: // 藏品主图
          coverImage.value = item.linkAddress
          break
        case 1: // 藏品图片
          collectionImages.value.push(item.linkAddress)
          break
        case 2: // 藏品音频
          collectionAudios.value.push({
            id: item.id,
            name: item.fileName || getFileName(item.linkAddress),
            url: item.linkAddress
          })
          break
        case 3: // 藏品视频
          collectionVideos.value.push({
            id: item.id,
            name: item.fileName || getFileName(item.linkAddress),
            url: item.linkAddress
          })
          break
        case 4: // 藏品三维文件
          collection3DFiles.value.push({
            id: item.id,
            name: item.fileName || getFileName(item.linkAddress),
            url: item.linkAddress
          })
          break
        case 5: // 链接地址
          collectionLinks.value.push({
            id: item.id,
            name: item.fileName || item.linkAddress,
            url: item.linkAddress
          })
          break
        case 6: // 藏品精准三维文件
          collection3DPreciseFiles.value.push({
            id: item.id,
            name: item.fileName || getFileName(item.linkAddress),
            url: item.linkAddress
          })
          break
      }
    })

    console.log('📂 多媒体文件分类结果：', {
      cover: coverImage.value,
      images: collectionImages.value,
      audios: collectionAudios.value,
      videos: collectionVideos.value,
      files3D: collection3DFiles.value,
      links: collectionLinks.value,
      preciseFiles3D: collection3DPreciseFiles.value
    })
  } catch (error) {
    console.error('获取多媒体文件失败：', error)
  }
}

// 从URL中提取文件名
const getFileName = (url: string): string => {
  if (!url) return '未知文件'
  const parts = url.split('/')
  return parts[parts.length - 1] || '未知文件'
}

// 下载文件
const downloadFile = (url: string, fileName: string) => {
  const link = document.createElement('a')
  link.href = url
  link.download = fileName
  link.target = '_blank'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

// 在新标签页打开链接
const openLink = (url: string) => {
  window.open(url, '_blank')
}

// 预览图片
const previewImage = (currentUrl: string, allImages?: string[]) => {
  const urlList = allImages || [currentUrl]
  const initialIndex = urlList.indexOf(currentUrl)

  createImageViewer({
    zIndex: 9999999,
    urlList,
    initialIndex: initialIndex >= 0 ? initialIndex : 0
  })
}

// 预览所有藏品图片
const previewAllImages = (currentIndex: number = 0) => {
  const allImages = coverImage.value
    ? [coverImage.value, ...collectionImages.value]
    : collectionImages.value
  if (allImages.length > 0) {
    createImageViewer({
      zIndex: 9999999,
      urlList: allImages,
      initialIndex: currentIndex
    })
  }
}

// 预览3D模型
const preview3DModel = (url: string, name: string) => {
  const collectionName = formData.value.name || '3D模型预览'
  console.log('🔍 预览3D模型参数:', {
    url,
    name,
    collectionName: collectionName,
    formDataName: formData.value.name
  })
  const previewUrl = `/preview/3d?url=${encodeURIComponent(url)}&name=${encodeURIComponent(name)}&collectionName=${encodeURIComponent(collectionName)}`
  console.log('🔗 预览URL:', previewUrl)
  window.open(previewUrl, '_blank')
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

<style lang="scss" scoped>
.info-item {
  margin-bottom: 16px;
  line-height: 1.5;
}
.info-label {
  font-weight: bold;
  color: #606266;
  margin-right: 8px;
}
.info-value {
  color: #303133;
}
/* 多媒体附件样式 */
.media-section {
  margin-bottom: 32px;
}
.media-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e4e7ed;
}
/* 图片预览样式 */
.image-preview-container {
  display: flex;
  justify-content: flex-start;
}
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
}
.image-item {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #e4e7ed;
  transition: all 0.3s ease;
}
.image-item:hover {
  border-color: #409eff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}
.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: white;
}
.image-item:hover .image-overlay {
  opacity: 1;
}
.preview-icon {
  font-size: 24px;
  margin-bottom: 4px;
}
/* 文件列表样式 */
.file-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.file-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
}
.file-item:hover {
  background: #ecf5ff;
  border-color: #409eff;
}
.file-icon {
  font-size: 20px;
  margin-right: 12px;
  flex-shrink: 0;
}
.audio-icon {
  color: #67c23a;
}

.video-icon {
  color: #e6a23c;
}

.link-icon {
  color: #409eff;
}

.model-icon {
  color: #909399;
}

.precise-icon {
  color: #f56c6c;
}

.file-name {
  flex: 1;
  font-size: 14px;
  color: #303133;
  margin-right: 12px;
  word-break: break-all;
}

.file-actions {
  display: flex;
  gap: 8px;
}

.link-text {
  color: #409eff;
  text-decoration: underline;
}

/* 无媒体文件样式 */
.no-media {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
}

.no-media-icon {
  font-size: 48px;
  margin-bottom: 16px;
  color: #c0c4cc;
}

.no-media p {
  font-size: 16px;
  margin: 0;
}
</style>
